<template>
	<view class="saishi-detail">
		<!-- 背景图和遮罩层 -->
		<view class="bg-wrapper">
			<image class="bg-image" :src="config.baseUrl + saishiInfo.img" mode="aspectFill"></image>
			<view class="bg-mask"></view>
		</view>

		<!-- 顶部赛事信息 -->
		<view class="header">
			<view class="title-wrapper">
				<image class="trophy-icon" style="width: 80rpx; height: 80rpx;border-radius: 50%;" :src="config.baseUrl + saishiInfo.img" mode="aspectFit"></image>
				<view class="title">{{ saishiInfo.tournamentName }}</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: currentTab === index }" @click="switchTab(index)">
					{{ tab }}
					<view class="tab-line" v-if="currentTab === index"></view>
				</view>
			</view>

			<!-- 根据当前tab显示对应内容 -->
			<view class="tab-content" v-show="currentTab === 0">
				<!-- 赛事信息 -->
				<view class="info-section card-style">
					<view class="section-title">
						<text class="title-icon"></text>
						赛事信息
					</view>
					<view class="info-item">
						<text class="label">开始时间</text>
						<text class="value">{{ saishiInfo.startTime || "待定" }}</text>
					</view>
					<view class="info-item">
						<text class="label">结束时间</text>
						<text class="value">{{ saishiInfo.endTime || "待定" }}</text>
					</view>
					<view class="info-item">
						<text class="label">比赛城市</text>
						<text class="value">{{ saishiInfo.city || "待定" }}</text>
					</view>
					<view class="info-item">
						<text class="label">装备要求</text>
						<text class="value">{{ saishiInfo.gearRequirements || "无" }}</text>
					</view>
					<view class="info-item">
						<text class="label">比赛规则</text>
						<text class="value">{{ saishiInfo.disciplineRules || "待定" }}</text>
					</view>
					<view class="info-item">
						<text class="label">赛制</text>
						<text class="value">{{ saishiInfo.saizhi || "待定" }}</text>
					</view>
				</view>

				<!-- 组委会信息 -->
				<view class="committee-section card-style">
					<view class="section-title">
						<text class="title-icon"></text>
						组委会
					</view>
					<view class="info-item">
						<text class="label">主办方</text>
						<text class="value">{{ saishiInfo.hoster || "待定" }}</text>
					</view>
				</view>
			</view>

			<view class="tab-content" v-show="currentTab === 1">
				<view class="teams-list">
					<view v-if="teamsList.length === 0" class="empty-state"> 暂无球队报名 </view>
					<view v-else v-for="(team, index) in teamsList" :key="team.id" class="team-card card-style">
						<view class="team-info">
							<image class="team-avatar" :src="team.img ? config.baseUrl + team.img : '/static/default-team.png'" mode="aspectFill"> </image>
							<view class="team-details">
								<view class="team-name">{{ team.teamName || "未命名球队" }}</view>
								<!-- <view class="team-status" :class="team.status === '1' ? 'status-verified' : ''">
									{{ team.status === "1" ? "已审核" : "待审核" }}
								</view> -->
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tab-content" v-show="currentTab === 2">
				<view class="schedule-list">
					<view v-if="saishiMatch.length === 0" class="empty-state">
						<image src="/static/empty-data.png" mode="aspectFit" class="empty-icon"></image>
						<text>暂无赛程安排</text>
					</view>
					<view v-else class="match-list card-style">
						<view class="section-title">
							<text class="title-icon"></text>
							赛程安排
						</view>
						<view v-for="(match, index) in saishiMatch" :key="index" class="match-item">
							<view class="match-time">
								<text class="time-text">{{ formatDateTime(match.matchDateTime) }}</text>
								<text class="match-round">第{{ match.round }}轮</text>
							</view>
							<view class="match-content">
								<view class="team-info">
									<view class="team-logo-wrapper">
										<image class="team-logo" :src="config.baseUrl + match.teamAUrl"></image>
									</view>
									<text class="team-name">{{ match.teamA }}</text>
								</view>
								<view class="match-status">
								<text>{{ match.matchResult }}</text>
									<text class="vs">VS</text>
								</view>
								<view class="team-info">
									<view class="team-logo-wrapper">
										<image class="team-logo" :src="config.baseUrl + match.teamBUrl"></image>
									</view>
									<text class="team-name">{{ match.teamB }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tab-content" v-show="currentTab === 3">
				<view class="ranking-list">
					<view v-if="leaderboardList.length === 0" class="empty-state">
						<image src="/static/empty-data.png" mode="aspectFit" class="empty-icon"></image>
						<text>暂无排名数据</text>
					</view>
					<view v-else class="leaderboard card-style">
						<!-- 表头 -->
						<view class="section-title">
							<text class="title-icon"></text>
							积分榜
						</view>
						<view class="leaderboard-header">
							<text class="team-col">球队</text>
							<text class="stats-col">进球</text>
							<text class="stats-col">失球</text>
							<text class="stats-col">积分</text>
						</view>
						<!-- 球队排名列表 -->
						<view v-for="(team, index) in leaderboardList" :key="team.id" class="leaderboard-item" :class="{ 'top-three': index < 3 }">
							<view class="team-col">
								<text class="rank-number" :class="'rank-' + (index + 1)">{{ index + 1 }}</text>
								<image class="team-avatar" :src="team.img ? config.baseUrl + team.img : '/static/default-team.png'" mode="aspectFill"> </image>
								<text class="team-name">{{ team.teamName || "未命名球队" }}</text>
							</view>
							<text class="stats-col">{{ team.goalsScored || 0 }}</text>
							<text class="stats-col">{{ team.goalsConceded || 0 }}</text>
							<text class="stats-col points">{{ team.points || 0 }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tab-content" v-show="currentTab === 4">
				<view class="video-list">
					<view v-if="!saishiInfo.videoList || saishiInfo.videoList.length === 0" class="empty-state">
						<image src="/static/empty-data.png" mode="aspectFit" class="empty-icon"></image>
						<text>暂无相关视频</text>
					</view>
					<view v-else class="video-item" v-for="(video, index) in saishiInfo.videoList" :key="index">
						<view class="video-title">{{ video.name }}</view>
						<video :src="config.baseUrl + video.url" controls></video>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-btns">
			<button class="signup-btn" @click="signup">立即报名</button>
		</view>
	</view>
</template>

<script>
import { createTournamentTeam, getTournamentTeamsList, getTournamentLeaderboardList, getTournamentMatch } from "@/api/system/saishi";
import config from "@/config";
export default {
	data() {
		return {
			currentTab: 0,
			tabs: ["详情", "球队", "赛程", "榜单", "相关视频"],
			saishiInfo: {
				id: null,
				num: null,
				tournamentName: "",
				startTime: "",
				endTime: "",
				city: "",
				disciplineRules: "",
				gearRequirements: "",
				hoster: "",
				rules: null,
				schedule: null,
				videoList: []
			},
			teamsList: [],
			config,
			leaderboardList: [],
			saishiMatch: []
		};
	},
	onLoad() {
		const saishi = JSON.parse(uni.getStorageSync("saishi"));
		if (saishi) {
			this.saishiInfo = saishi;
			this.saishiInfo.videoList = JSON.parse(saishi.videos);
		}
		this.getTournamentTeamsList();
		this.getTournamentLeaderboardList();
		this.getTournamentMatch();
	},
	methods: {
		async getTournamentMatch() {
			const res = await getTournamentMatch(this.saishiInfo.id);
			this.saishiMatch = res.data;
			console.log(this.saishiMatch);
		},
		switchTab(index) {
			this.currentTab = index;
		},
		follow() {
			// 关注逻辑
		},
		signup() {
			// 报名逻辑
			createTournamentTeam({
				tournamentId: this.saishiInfo.id
				// teamId: uni.getStorageSync("userInfo").id,
				// teamName: this.saishiInfo.tournamentName
			}).then((res) => {
				console.log(res);
				if (res.code == 200) {
					uni.showToast({
						title: "报名成功",
						icon: "success"
					});
				}
			});
		},
		async getTournamentTeamsList() {
			const res = await getTournamentTeamsList({
				tournamentId: this.saishiInfo.id,
				pageNum: 1,
				pageSize: 10
			});
			this.teamsList = res.data.records;
		},
		async getTournamentLeaderboardList() {
			const res = await getTournamentLeaderboardList({
				tournamentId: this.saishiInfo.id,
				pageNum: 1,
				pageSize: 100
			});
			this.leaderboardList = res.data.records;
			console.log(this.leaderboardList);
		},
		formatDateTime(dateTimeStr) {
			if (!dateTimeStr) return "待定";
			const date = new Date(dateTimeStr);
			const month = date.getMonth() + 1;
			const day = date.getDate();
			const hours = date.getHours().toString().padStart(2, "0");
			const minutes = date.getMinutes().toString().padStart(2, "0");
			return `${month}月${day}日 ${hours}:${minutes}`;
		}
	}
};
</script>

<style lang="scss" scoped>
.saishi-detail {
	min-height: 100vh;
	background: #f6f7fb;

	.bg-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 360rpx;
		z-index: 1;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	.bg-mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.4) 100%);
	}

	.header {
		position: relative;
		z-index: 2;
		padding: 60rpx 40rpx;

		.title-wrapper {
			display: flex;
			align-items: center;

			.trophy-icon {
				width: 80rpx;
				height: 80rpx;
				margin-right: 20rpx;
			}

			.title {
				font-size: 40rpx;
				color: #fff;
				font-weight: 600;
				text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
			}
		}
	}

	.content {
		position: relative;
		z-index: 2;
		background: #f6f7fb;
		border-radius: 32rpx 32rpx 0 0;
		margin-top: 40rpx;
		padding: 30rpx;
		margin-bottom: 120rpx;

		.tabs {
			display: flex;
			background: #fff;
			border-radius: 16rpx;
			padding: 8rpx;
			margin-bottom: 30rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

			.tab-item {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				font-size: 28rpx;
				color: #666;
				position: relative;
				transition: all 0.3s;

				&.active {
					color: #4cd964;
					font-weight: 600;
				}

				.tab-line {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #4cd964;
					border-radius: 2rpx;
				}
			}
		}
	}

	.card-style {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.section-title {
		display: flex;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 24rpx;

		.title-icon {
			width: 6rpx;
			height: 28rpx;
			background: #4cd964;
			margin-right: 16rpx;
			border-radius: 3rpx;
		}
	}

	.info-item {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.label {
			width: 140rpx;
			color: #666;
			font-size: 28rpx;
		}

		.value {
			flex: 1;
			color: #333;
			font-size: 28rpx;
		}
	}

	.bottom-btns {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 24rpx 40rpx;
		background: #fff;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.06);

		.signup-btn {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			background: linear-gradient(135deg, #4cd964, #3cc952);
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
			border-radius: 44rpx;
			text-align: center;
			box-shadow: 0 4rpx 12rpx rgba(76, 217, 100, 0.2);
			transition: all 0.3s;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 8rpx rgba(76, 217, 100, 0.2);
			}
		}
	}

	.teams-list {
		.empty-state {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			padding: 60rpx 0;
		}

		.team-card {
			margin-bottom: 20rpx;

			.team-info {
				display: flex;
				align-items: center;

				.team-avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: #f5f5f5;
				}

				.team-details {
					flex: 1;

					.team-name {
						font-size: 32rpx;
						color: #333;
						font-weight: 500;
						margin-bottom: 8rpx;
					}

					.team-status {
						font-size: 24rpx;
						color: #999;
						padding: 4rpx 12rpx;
						background: #f5f5f5;
						border-radius: 20rpx;
						display: inline-block;

						&.status-verified {
							color: #4cd964;
							background: rgba(76, 217, 100, 0.1);
						}
					}
				}
			}
		}
	}

	.ranking-list {
		.empty-state {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			padding: 60rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-icon {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
		}

		.leaderboard {
			.leaderboard-header {
				display: flex;
				align-items: center;
				padding: 20rpx 30rpx;
				border-bottom: 2rpx solid #f5f5f5;
				font-size: 28rpx;
				color: #999;
				font-weight: 500;
				background: #f8f9fc;
				border-radius: 12rpx;
			}

			.leaderboard-item {
				display: flex;
				align-items: center;
				padding: 28rpx 30rpx;
				border-bottom: 2rpx solid #f0f2f7;
				transition: all 0.3s ease;

				&:hover {
					background: linear-gradient(to right, #fafbfd, #fff);
					transform: translateX(4rpx);
				}

				&.top-three {
					background: linear-gradient(to right, #fafbfd, #fff);
					border-left: 6rpx solid #4cd964;
					margin: 4rpx 0;
				}
			}

			.team-col {
				flex: 1;
				display: flex;
				align-items: center;

				.rank-number {
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					font-size: 28rpx;
					border-radius: 50%;
					margin-right: 24rpx;

					&.rank-1 {
						background: linear-gradient(135deg, #ffd700, #f5b853);
						color: #fff;
						font-weight: 700;
						box-shadow: 0 4rpx 12rpx rgba(245, 184, 83, 0.3);
					}

					&.rank-2 {
						background: linear-gradient(135deg, #c0c0c0, #97a1c3);
						color: #fff;
						font-weight: 600;
						box-shadow: 0 4rpx 12rpx rgba(151, 161, 195, 0.3);
					}

					&.rank-3 {
						background: linear-gradient(135deg, #cd7f32, #c18558);
						color: #fff;
						font-weight: 600;
						box-shadow: 0 4rpx 12rpx rgba(193, 133, 88, 0.3);
					}
				}

				.team-avatar {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					margin-right: 16rpx;
					background-color: #f5f5f5;
					border: 2rpx solid #eee;
				}

				.team-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}
			}

			.stats-col {
				width: 100rpx;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				font-family: DIN;

				&.points {
					color: #4cd964;
					font-weight: 600;
					font-size: 32rpx;
				}
			}
		}
	}

	.schedule-list {
		.empty-state {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			padding: 60rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-icon {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
		}

		.match-list {
			.match-item {
				padding: 40rpx 30rpx;
				border-bottom: 2rpx solid #f5f5f5;
				transition: all 0.3s;

				&:hover {
					background: #fafbfd;
				}

				&:last-child {
					border-bottom: none;
				}

				.match-time {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-bottom: 30rpx;
					gap: 20rpx;

					.time-text {
						font-size: 26rpx;
						color: #666;
						background: #f8f9fc;
						padding: 8rpx 24rpx;
						border-radius: 24rpx;
					}

					.match-round {
						font-size: 26rpx;
						color: #666;
						background: linear-gradient(to right, #f8f9fc, #f0f2f7);
						padding: 8rpx 24rpx;
						border-radius: 24rpx;
						box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
					}
				}

				.match-content {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx;
					background: linear-gradient(to right, #fff, #fafbfd, #fff);
					border-radius: 20rpx;
					box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
					transition: all 0.3s ease;

					&:hover {
						transform: translateY(-2rpx);
						box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
					}
				}

				.team-info {
					display: flex;
					align-items: center;
					flex-direction: column;
					flex: 1;
					padding: 0 20rpx;
					min-width: 0;

					&:first-child {
						.team-name {
							margin-top: 16rpx;
						}
					}

					&:last-child {
						.team-name {
							margin-top: 16rpx;
						}
					}

					.team-logo-wrapper {
						flex-shrink: 0;
						width: 120rpx;
						height: 120rpx;
						background: #fff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
						transition: all 0.3s ease;

						&:hover {
							transform: scale(1.05);
						}

						.team-logo {
							width: 90rpx;
							height: 90rpx;
							border-radius: 50%;
							transition: all 0.3s ease;
						}
					}

					.team-name {
						font-size: 28rpx;
						color: #333;
						font-weight: 600;
						max-width: 200rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
						text-align: center;
					}
				}

				.match-status {
					flex-shrink: 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 0 30rpx;

					.vs {
						font-size: 48rpx;
						font-weight: 700;
						background: linear-gradient(135deg, #4cd964, #3cc952);
						-webkit-background-clip: text;
						color: transparent;
						text-shadow: 0 2rpx 8rpx rgba(76, 217, 100, 0.3);
					}
				}
			}
		}
	}

	.video-list {
		.video-item {
			background: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
			transition: all 0.3s ease;

			&:hover {
				transform: translateY(-2rpx);
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
			}

			.video-title {
				font-size: 28rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 16rpx;
				padding-left: 16rpx;
				border-left: 4rpx solid #4cd964;
			}

			video {
				width: 100%;
				border-radius: 12rpx;
				background: #000;
			}
		}

		.empty-state {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			padding: 60rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.empty-icon {
				width: 200rpx;
				height: 200rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	// 添加页面切换动画
	.tab-content {
		animation: fadeIn 0.3s ease;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}
</style>
